<template>
  <div class="course-item">
    <div class="img-box"><img :src="data.imgURL" /></div>
    <div class="info-box">
      <p class="info-title">{{ data.title }}</p>
      <span class="info-status" @click="handleClick">{{ data.status }}</span>
      <p class="info-detail">{{ data.detail }}</p>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
  setup() {
    const { ctx, proxy } = getCurrentInstance();
    function handleClick() {
      proxy.$router.push("/user/CourseComment");
    }
    return {
      handleClick,
    };
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style lang="scss" scoped>
p {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.course-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 15px;
  .img-box {
    margin: 15px;
    width: 100px;
    height: 60px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    &-box {
      width: 200px;
      position: relative;
    }
    &-title {
      font-size: $fontsize-4;
    }
    &-detail {
      font-size: $fontsize-5;
      margin-top: -5px;
    }
    &-status {
      position: absolute;
      top: 18px;
      right: 20px;
      padding: 4px;
      color: $theme-color3;
      font-size: $fontsize-5;
      background-color: $theme-color5;
      border-radius: $border-radius-2;
    }
  }
}
</style>
